{% extends 'layout/layui_base_page.html' %}
{% load static %}

<!-- Title -->
{% block title %} 权限管理 {% endblock %}

<!-- CSS -->
{% block css %}
    <style>
        #layerForm .layui-form-item {
            margin-bottom: 25px;
        }
    </style>

{% endblock %}


<!-- Content -->
{% block content %}
    <!-- 内容01： 面包屑导航 -->
    <span class="layui-breadcrumb">
      <a href="{% url 'main' %}">首页</a>
      <a href="#">用户角色</a>
      <a><b>权限管理</b></a>
    </span>

    <!-- 内容02：树状框展示 -->
    <div style="margin: 30px;">
        <div id="permissionArea" class="demo-tree demo-tree-box" style=" height: 750px;width:500px;
    background-color: whitesmoke; padding: 20px;float:left"></div>
        <div style="float:left; margin: 0 30px;">
            <div class="layui-form-item">
                <button class="layui-btn" id="btnAdd">添加</button>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" id="btnEdit">修改</button>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" id="btnDel">删除</button>
            </div>
        </div>
        <div style="float:left;height: 750px;width:800px;padding: 0 20px;">
            <form class="layui-form" id="layerForm" lay-filter="layerForm">
                {% csrf_token %}
                <div class="layui-form-item" style="display: none">
                    <label class="layui-form-label" for="id"><b>编号：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="id" name="id" class="layui-input" readonly
                               style="background-color: #eaeaea">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" for="title"><b>标题：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="title" name="title" class="layui-input" readonly
                               style="background-color: #eaeaea">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" for="url"><b>URL：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="url" name="url" class="layui-input" readonly
                               style="background-color: #eaeaea">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="menu_id"><b>所属菜单：</b></label>
                    <div class="layui-input-block">
                        <select id="menu_id" name="menu_id" lay-search="">
                            <option value="">请选择</option>
                        </select>
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" for="order"><b>排序编号：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="order" name="order" class="layui-input" readonly
                               style="background-color: #eaeaea">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>

                <div class="layui-form-item" style="float:right;margin-top: 40px;">
                    <input type="button" class="layui-btn layui-btn-normal" id="btnCommit" value="提交">
                    <input type="button" class="layui-btn layui-btn-primary" id="btnCancel" value="取消">
                </div>


            </form>

        </div>
    </div>

{% endblock %}


<!-- JS -->
{% block js %}
    <script>
        // 定义一个Operation用来区分是修改还是添加  1--添加  2--修改
        let Operation = 0;
        // 入口函数
        $(function () {
            // 页面的初始化
            initPage();
            // 展示权限树状结构
            loadTree();
            // 响应按钮的点击
            buttonClick();
        });

        // =============页面初始化的实现 =============
        function initPage() {
            layui.use(['form', 'element'], function () {
                let form = layui.form;
                let element = layui.element;

                // 初始化菜单的下拉框
                $.ajax({
                    url: "{% url 'menu_all_select' %}"
                    , method: 'get'
                    , success: function (res) {
                        // 获取要放置的下拉框
                        let container = $('#menu_id');
                        // 把下拉框设置为空
                        container.html("");
                        // 添加提示
                        $('<option>').attr('value', '').html("请选择").appendTo(container);
                        // 遍历获取的所有menu
                        $.each(res.data, (index, value) => {
                            // 把每一个记录添加到下拉框
                            $('<option>').attr('value', value.id).html(value.title).appendTo(container)
                        });
                        // 重新渲染表单
                        form.render();
                    }
                })
            });

        }

        // ============= 加载权限的树状结构 ==============
        function loadTree() {
            // ==== 请求树状结构的数据====
            $.ajax({
                url: "{% url 'list_permission' %}"
                , method: 'get'
                , dataType: 'json'
                , success: function (res) {
                    console.log(res.data);
                    loadTreePermission(res.data);
                }
            })
        }

        // =============== 把权限的数据用树状结构展示 ===============
        function loadTreePermission(data) {
            layui.use(['tree', 'form'], function () {
                let tree = layui.tree;
                let form = layui.form;

                tree.render({
                    elem: "#permissionArea"
                    , showCheckbox: false
                    , data: data

                    // ============= 树状结构的的节点点击事件 ===============
                    , click: function (obj) {
                        // 判断是否是子节点
                        let is_not_child = obj.elem.hasClass("layui-tree-setHide");
                        // 如果是子节点，展示信息在右边的表单
                        if (!is_not_child) {
                            // Ajax请求
                            $.ajax({
                                url: "{% url 'permission_get_by_id' %}"
                                , method: 'post'
                                , data: {
                                    permission_id: obj.data.id,
                                    csrfmiddlewaretoken: "{{ csrf_token }}"
                                }
                                , dataType: 'json'
                                , success: function (res) {
                                    // 使用form.val()赋值
                                    form.val('layerForm', res.data);
                                    // 重新渲染表单
                                    form.render();
                                }
                            });


                        }
                    }
                })
            })
        }

        // ===============  按钮点击事件的功能实现 ==================
        function buttonClick() {
            //=== 点击添加 ====
            $('#btnAdd').on('click', function () {
                // 所有的文本输入库可输入，空值
                $('#layerForm').find("input[type='text']").prop('readonly', false).attr('style', 'background-color:white').val("");
                // 下拉框为空
                $('#menu_id').val("");
                // 设置Operation
                Operation = 1;
            });
            //=== 点击修改 ====
            $('#btnEdit').on('click', function () {
                // 判断表单中是否有值
                if ($('#title').val().length === 0) {
                    layui.layer.msg("请选择一个要修改的权限条目");
                    return;
                }

                // 修改状态
                $('#layerForm').find("input[type='text']").prop('readonly', false).attr('style', 'background-color:white');
                // 设置Operation
                Operation = 2;


            });

            // === 点击删除 ====
            $('#btnDel').on('click', function () {
                // 如果没有选中某一个权限条目提示
                if ($('#title').val().length === 0) {
                    layui.layer.msg("请选择一个要修改的权限条目");
                    return;
                }

                layui.use(['layer'], function () {
                    let layer = layui.layer;

                    // 准备确认文本
                    let confirmStr = "您确定要删除权限条目【名称为：" + $('#title').val() + "】信息吗？";
                    // 确认框
                    layer.confirm(confirmStr, {
                        icon: 3, area: ['600px', '200px'], btn: ['确认', '取消']
                    }, function (index) {
                        // Ajax请求
                        $.ajax({
                            url: "{% url 'del_permission' %}"
                            , method: 'post'
                            , data: {
                                id: $('#id').val(),
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            }
                            , success: function (res) {
                                if (res.status) {
                                    layer.msg("删除成功！");
                                    loadTree();

                                    // 清空表单的展示
                                    // 文本为空，并且只读
                                    $('#layerForm').find("input[type='text']").prop('readonly', true).attr('style', 'background-color:#eaeaea').val("");
                                    // 下拉框为空
                                    $('#menu_id').val("");
                                    // 设置Operation
                                    Operation = 0;

                                } else {
                                    layui.msg(res.error);
                                }
                            }
                        })
                    })
                })
            });


            // === 点击取消按钮
            $('#btnCancel').on('click', function () {
                // 文本为空，并且只读
                $('#layerForm').find("input[type='text']").prop('readonly', true).attr('style', 'background-color:#eaeaea');
                // 下拉框为空
                $('#menu_id').val("");
                // 设置Operation
                Operation = 0;
            });

            // ==== 提交按钮 =====
            $('#btnCommit').on('click', function () {
                // ==== 清除所有的错误提示
                $('.error_msg').empty();
                // ===== 对表单进行判断 ====
                if (Operation === 1 || Operation === 2) {
                    if ($('#title').val().trim().length === 0) {
                        // 提示
                        $('#title').next().html("标题不能为空！");
                        return;
                    }
                    if ($('#url').val().trim().length === 0) {
                        // 提示
                        $('#url').next().html("URL不能为空！");
                        return;
                    }
                    if ($('#menu_id').val().trim().length === 0) {
                        // 提示
                        $('#menu_id').next().next().html("所属菜单不能为空！");
                        return;
                    }
                    if ($('#order').val().trim().length === 0) {
                        // 提示
                        $('#order').next().html("排序编号不能为空！");
                        return;
                    }
                }


                // 提交
                let commitURL = "";
                if (Operation === 1) {
                    commitURL = "{% url 'add_permission' %}";
                } else if (Operation === 2) {
                    commitURL = "{% url 'edit_permission' %}";
                }

                // 提交
                if (commitURL) {
                    // Ajax请求
                    $.ajax({
                        url: commitURL
                        , method: 'post'
                        , data: $('#layerForm').serialize()
                        , dataType: 'json'
                        , success: function (res) {
                            if (res.status) {
                                layer.msg("操作成功！");
                                loadTree();

                            } else {
                                layui.layer.msg(res.error);
                            }
                        }
                    })
                }
            })
        }
    </script>
{% endblock %}
